<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter();
import { ElMessage } from 'element-plus'
import { Search, Files } from '@element-plus/icons-vue'	//导入Search图标
import { plantsSurveypage } from '@/utils/api.js'

// 分页 B
const pageSize = ref(20);
const pageNum = ref(1);
const totalElements = ref(100);
const currentPage = ref(1);

const resp = () => {
    pageNum.value = 1;
    currentPage.value = 1;
    getanimalsSurveypage();
}

const handleCurrentChange = (val) => {
    pageNum.value = val;
    getanimalsSurveypage();
};
// 分页 E
const godetails = (data) => {
    let hisplant = {
        "pageSize": pageSize.value,
        "pageNum": pageNum.value,
        "keywords": keywords.value,
        "time": time,
        "currentPage": currentPage.value
    }
    window.sessionStorage.setItem('hisplant', JSON.stringify(hisplant));

    route.push({ path: '/history/plant/plantdetails', query: { id: data.id } });
};
const keywords = ref("");
const date = ref("");
const list = ref([]);
let time = '';
const gettime = () => {
    if (date.value != null) {
        let y = date.value.getFullYear();
        let m = (date.value.getMonth() + 1) > 9 ? (date.value.getMonth() + 1) : '0' + (date.value.getMonth() + 1);
        let d = date.value.getDate() > 9 ? date.value.getDate() : '0' + date.value.getDate();
        time = y + '-' + m + '-' + d;
    } else {
        time = '';
    }
    resp()
}
const getanimalsSurveypage = async () => {
    let res = await plantsSurveypage(usermsg.areaId, time, keywords.value, pageNum.value, pageSize.value)
    if (res.code == '200') {
        list.value = res.data.content;
        totalElements.value = res.data.totalElements;
    } else {
        ElMessage({
            message: res.message,
            type: 'warning',
        })
        list.value = []
    }
};
let usermsg = '';
onMounted(() => {
    usermsg = window.sessionStorage.getItem('usermsg');
    if (usermsg == undefined) {
        alert('您无权查看该网站，请登录后才能正常使用')
    } else {
        usermsg = JSON.parse(usermsg);
    };

    if (window.sessionStorage.getItem('hisplant') != null) {
        let data = JSON.parse(window.sessionStorage.getItem('hisplant'));
        pageSize.value = data.pageSize;
        pageNum.value = data.pageNum;
        keywords.value = data.keywords;
        time = data.time;
        date.value = new Date(data.time)
        currentPage.value = data.currentPage;
        getanimalsSurveypage();
        window.sessionStorage.removeItem('hisplant')
    } else {
        getanimalsSurveypage();
    }
})
</script>
<template>
    <div>
        <div class="ha-title" style="margin-bottom: 16px;">
            <div>
                <span>植物调查</span>
            </div>
        </div>
        <el-row :gutter="10">
            <el-col :span="3">
                <el-date-picker v-model="date" @change="gettime()" type="date" style="width: 100%;" placeholder="调查时间"
                    size="large" />
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="5">
                <el-input v-model="keywords" placeholder="搜索物种" size="large" class="input-with-select">
                    <template #append>
                        <el-button @click.stop="resp()" :icon="Search" />
                    </template>
                </el-input>
            </el-col>

        </el-row>

        <el-table :data="list" style="width: 100%;margin-top: 16px;height: calc(100% - 140px);"
            :header-cell-style="{ 'color': '#333', 'line-height': '40px' }">

            <el-table-column label="物种" prop="keywords" />
            <el-table-column label="调查时间" prop="recordTime" width="300" />
            <el-table-column label="调查人员" prop="workUser" show-overflow-tooltip />
            <el-table-column label="调查距离" prop="patrolDistance" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{ scope.row.patrolDistance }}Km</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="240">
                <template #default="scope">
                    <el-button type="info" @click.stop="godetails(scope.row)" :icon="Document" plain size="small">
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 B-->
        <div class="ml-page">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
                layout="total, prev, pager, next, jumper" :total="totalElements"
                @current-change="handleCurrentChange" />
        </div>
        <!-- 分页 E-->

    </div>
</template>
<style scoped></style>